import React, {useState} from 'react';
import {
    View,
    Text,
    TextInput,
    Button,
    StyleSheet,
    ScrollView,
    Image,
    TouchableOpacity, ToastAndroid,
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import Icon from 'react-native-vector-icons/FontAwesome';
import {newsAdd, uploadFile} from "../../../util/api";

const BranchApplyScreen = (props: { navigation: any }) => {
    console.log(props);
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [images, setImages] = useState([]);

    const pickImage = () => {
        ImagePicker.launchImageLibrary(
            {mediaType: 'photo', selectionLimit: 1},
            response => {
                if (!response.didCancel) {
                    if (response.assets) {
                        setImages(response.assets);
                    }

                }
            },
        );
    };

    const submit = () => {
        if (!title) {
            ToastAndroid.show('请填写标题。', 2000);
            return;
        }
        if (!description) {
            ToastAndroid.show('请填写描述内容。', 2000);
            return;
        }
        if (!images[0]) {
            ToastAndroid.show(`请上传图片。`, 2000);
            return;
        }
        console.log(images[0]);
        uploadFile(
            {
                uri: images[0].uri, // 替换为实际文件路径
                type: images[0].type,
                name: images[0].fileName,
            },
            'image',
        )
            .then(res => {
                console.log(12323412312312);
                console.log(res);
                const data = {
                    'newscontent': description,
                    'image': res.data.id,
                    'newsTitle': title
                }
                newsAdd(data).then((res) => {
                    console.log(res)
                    props.navigation.goBack()
                })
            })
            .catch(e => {
                console.log(e);
                ToastAndroid.show(`上传失败:${e}`, 2000);
            });

    };

    return (
        <ScrollView contentContainerStyle={styles.container}>
            <Text style={styles.label}>标题</Text>
            <TextInput style={styles.input} value={title} onChangeText={setTitle}/>

            <Text style={styles.label}>描述内容</Text>
            <TextInput
                style={[styles.input]}
                value={description}
                onChangeText={setDescription}
                multiline
            />
            <View style={{flexDirection: 'row'}}>

                <Button title="选择图片" onPress={() => pickImage()}/>
            </View>

            <View style={{flexDirection: 'row', flexWrap: 'wrap', marginTop: 10}}>
                {images.length ? (
                    images.map((image, index) => (
                        <View style={{position: 'relative'}}>
                            <Image key={index} source={{uri: image.uri}} style={styles.image}/>
                            <TouchableOpacity
                                style={{
                                    position: 'absolute',
                                    top: 2,
                                    right: 2,
                                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
                                    // borderRadius: 15,
                                    width: 30,
                                    height: 30,
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                }}
                                onPress={() => {
                                    // imgs.splice(index);
                                    const imgs = images.filter((value, idx) => idx != index);
                                    setImages(imgs);
                                }}>
                                <Text
                                    style={{
                                        color: 'white',
                                        fontSize: 16,
                                    }}>
                                    X
                                </Text>
                            </TouchableOpacity>
                        </View>
                    ))
                ) : (
                    <Icon
                        name={'file-image-o'}
                        size={95}
                        color={'rgba(0, 0, 0, 0.3)'}
                        style={styles.image}
                    />
                )}
            </View>
            <View style={{flexDirection: 'row', alignSelf: 'center'}}>
                <View
                    style={{
                        width: 75,
                        marginRight: 5,
                    }}>
                    <Button title="提交" onPress={submit}/>
                </View>
            </View>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 20,
    },
    label: {
        fontSize: 16,
        marginBottom: 5,
    },
    input: {
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 5,
        marginBottom: 10,
        padding: 10,
    },
    button: {
        fontSize: 16,
        color: 'blue',
        marginBottom: 10,
    },
    image: {
        width: 100,
        height: 100,
        marginBottom: 10,
        margin: 2,
    },
});

export default BranchApplyScreen;
